<template>

</template>
<script>



export default {
  name: "Index",
  data() {
    return {
      selectedIndex: 0, // 初始选中项索引
      imageUrl: require('@/assets/images/ullib.png'),
      selectedImageUrl: require('@/assets/images/ullil.png'),
      items: [
        { name: '综合管理', selected: true },
        { name: '数字孪生', selected: false },
        { name: '智慧调度', selected: false },
        { name: '智慧运营', selected: false },
        { name: '设施管理', selected: false },
        { name: '统计分析', selected: false },
        { name: '系统设置', selected: false },
      ],
      imageUrls: [
        require('@/assets/images/x1.png'),
        require('@/assets/images/x2.png'),
        require('@/assets/images/x3.png'),
        require('@/assets/images/x4.png'),
        require('@/assets/images/x5.png'),
        require('@/assets/images/x6.png'),
        require('@/assets/images/x6.png'),
        require('@/assets/images/x6.png'),
      ],

    };
  },
  mounted() {

  },
  methods: {

    selectItem(index) {
      this.items.forEach((item, i) => {
        item.selected = i === index;
      });
      this.selectedIndex = index; // 更新选中项索引
    },
    getImgSrc(index) {
      return this.imageUrls[index];
    }

  }
};
</script>

<style scoped lang="scss">
  .asliderStyle{
    font-size: 1rem;
    height: 98%;
    display: flex;
  .leftDiv{
    width: 8%;
    height: 97%;
    background-image: url("../../assets/images/leftimg.png");
    background-size: cover; /* 背景图片铺满并保持比例不变 */
    background-repeat: no-repeat; /* 不重复平铺 */
    background-position: center; /* 图片居中对齐 */
    margin: 0; /* 去除默认的外边距 */
    padding: 0; /* 去除默认的内边距 */

  }
  .rightDiv{
    width: 92%;
    padding: 1rem 0rem 0 3rem;
  }


  ul {
    list-style-type: none;  /* 设置列表项的符号为无 */
    padding: 0;  /* 去除默认的内边距 */
    li{
      margin-top: 4rem;
      cursor: pointer;
      div{
        width: 18rem;
        height: 2rem;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 1.3rem;
        color: #90B7D3;
        line-height: 33px;
        text-align: left;
        font-style: normal;
        position: relative;
        background-size: cover; /* 背景图片铺满并保持比例不变 */
        background-repeat: no-repeat; /* 不重复平铺 */
        background-position: center; /* 图片居中对齐 */
        margin: 0; /* 去除默认的外边距 */
        padding: 0; /* 去除默认的内边距 */
        img{
          width: 2rem;
          position: absolute;
          top: -0.8rem;
          left: 1rem;
        }
        span{
          position: absolute;
          top: -1rem;
          left: 4rem;
        }
      }
      .selected {
        color: white;
        font-size: 1.5rem!important;
      }
    }
  }
}
</style>

